|
关于select选项的写法 有三种情况 ①.写在HTML中，②.写在JS一个数组中，③.通过接口去获取得到，我们直接上代码： 第一种是option的值写在HTML中
请选择未处理处理中处理完成
new Vue({el:'#app',data:{selected:'' //默认选中项的value值是什么 就给绑定的属性什么值 这里默认选中项请选择的value值是空 我们就给绑定的属性 select 一个空值},})
第二种是option 选项内容写在JS中的，通过v-for来遍历的：
{{item.statusVal}}
new Vue({el:'#app',data:{statusArr:[{statusId:'0',statusVal:'请选择'},{statusId:'1',statusVal:'未处理'},{statusId:'2',statusVal:'处理中'},{statusId:'3',statusVal:'处理完成'},],selected:''},created(){// 在组件创建之后，把默认选中项的value值赋给绑定的属性//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现this.selected = this.statusArr[0].statusId;}})
第三种是option 选项内容 通过接口去获取 但是接口里没有默认选中项怎么办呢？看代码
请选择 {{item.statusVal}}
new Vue({el:'#app',data:{statusArr:[], //用来接收从接口里获取出来的select下拉框里的值selected:''},getSelectInfo(){var url = "../monitor_admin_front/device/status"; //接口地址axios.get(url).then(response => {if(response.data.retCode == 0){this.statusArr = response.data.data; //将获取出来的数据赋给定义的数组 以便于去循环遍历}}) },created(){this.getSelectInfo();}})
|